<!--
 * @FileDescription: 新增/修改 单元弹窗
 * @Author: 祝小文
 * @Date: 2022-10-08 09:15
 -->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { emitter } from '@/composables'
import Title from '@/components/title/index.vue'
import DialogPopUp from '@/components/DialogPopUp/index.vue'
import { checkNumberTypeAndLength } from '@/utils/common'
import { queryZdZdmcInfo, queryDYXXInfo, insertOrUpdateDYXX, queryDcsSbInfo } from '@/service/api'

const chemicalStore = useChemicalStore()
const device = chemicalStore.productionStorage.device

const props = defineProps({
  cjInfo: {
    type: Object,
    default: () => {
      return {}
    },
  }, //采集信息,
})

//字典
const sfBool: any = chemicalStore.commonDictionaries.sfBool
const ywBool: any = chemicalStore.commonDictionaries.ywBool
const syzt: any = chemicalStore.commonDictionaries.syzt

//字段默认值
function fieldDefault() {
  if (props.cjInfo.lx === 'edit') {
    const selectField = ['syzt']
    for (const key in dyInfo.value) {
      if (selectField.includes(key) && dyInfo.value[key] === '0') {
        if (key === 'syzt') {
          dyInfo.value.syzt = syzt[0].zddm
        }
      }
    }
  } else {
    dyInfo.value.syzt = syzt[0].zddm

    const sfBool: any = ['sfyfhd', 'sfszhjxt']
    const ywBool: any = ['ywdcsxt', 'ywsisxt', 'ywplxt', 'ywpmxt']
    for (const key in dyInfo.value) {
      if (sfBool.includes(key) || ywBool.includes(key)) {
        dyInfo.value[key] = '0'
      }
    }
  }
}

//获取企业id
const qyId = computed(() => {
  return chemicalStore.qyInfo.id
})

//单元信息
const dyInfo: any = ref({
  dymc: '',
  syzt: '',
  sfyfhd: '',
  fhdg: '',
  fhdmj: '',
  dygnsm: '',
  ywdcsxt: '',
  ywsisxt: '',
  ywplxt: '',
  sfszhjxt: '',
  ywpmxt: '',
  hzwxxsm: '',
  symhyjzysx: '',
  bz: '',
  dcsid: '',
})
//必填字段
const requiredNameArr = [
  'dymc',
  'syzt',
  'sfyfhd',
  'dygnsm',
  'ywdcsxt',
  'ywsisxt',
  'ywplxt',
  'sfszhjxt',
  'ywpmxt',
  'hzwxxsm',
  'symhyjzysx',
  'rymc',
  'ryyddh',
  'ryzbdh',
]
//主要危险介质
const zywxjzList = ref([{ zywxjzmc: '', zywxjzfydl: '', state: false, sfyx: 1 }])

/** 表格 保存事件 */
const tableSaveClick = (item: any, index: any) => {
  if (!item.zywxjzmc || !item.zywxjzfydl) {
    return ElMessage.warning('请填写名称或反应当量')
  }
  item.state = true
  //如果保存的数据是最后一项才需要添加新的一行
  const count = zywxjzList.value.filter((item: any) => item.sfyx === 1).length
  if (count === index + 1) {
    zywxjzList.value.push({ zywxjzmc: '', zywxjzfydl: '', state: false, sfyx: 1 })
  }
}

/** 表格 修改事件 */
const tableEditClick = (item: any) => {
  item.state = false
}

/** 表格 删除事件 */
const tableDeleteClick = (item: any) => {
  item.sfyx = 0
}

/** 渲染单元信息 */
function loadUnitInfo() {
  queryDYXXInfo({ key: props.cjInfo.cjId }).then((res: any) => {
    delete res.id //过滤id
    delete res.cjsj //过滤创建时间
    delete res.gxsj //过滤更新时间

    //表格数据赋值
    if (res.zywxjzxxModelList && res.zywxjzxxModelList.length > 0) {
      zywxjzList.value = JSON.parse(JSON.stringify(res.zywxjzxxModelList))
      zywxjzList.value.forEach((item: any) => {
        item.state = true
      })
      zywxjzList.value.push({ zywxjzmc: '', zywxjzfydl: '', state: false, sfyx: 1 })
      delete res.zywxjzxxModelList
    }

    dyInfo.value = res

    fieldDefault() //字段默认值

    //dcs内容
    let str: any = ''
    res.dcsBdInfoList &&
      res.dcsBdInfoList.forEach((item: any) => {
        str += item.equipNo + ', '
      })
    if (str) {
      dyInfo.value.dcsid = str.substring(0, str.length - 2)
    } else {
      dyInfo.value.dcsid = ''
    }
  })
}

/** DCS设备编码绑定功能 Start */
const dcsListShow = ref(false)
const dcsList = ref([])
const dcsSearchInput = ref('')
const dcsIdArr: any = ref([])
//加载dcs设备列表
const loadDcsList = () => {
  const params: any = { qyid: qyId.value }
  if (props.cjInfo.lx === 'edit') {
    params.cjid = props.cjInfo.cjId
  }
  dcsIdArr.value = []
  queryDcsSbInfo(params).then((res: any) => {
    res.forEach((item: any) => {
      if (item.sfbd) {
        item.sfyx = 1
        dcsIdArr.value.push(item)
      }
    })
    dcsList.value = res
  })
}

//dcs设备列表搜索功能
const dcsSearchInputClick = (val: any) => {
  queryDcsSbInfo({ qyid: qyId.value, cjid: props.cjInfo.cjId, cxmx: val }).then((res: any) => {
    dcsList.value = res
  })
}

//dcs设备编码绑定点击事件
const dcsBindingClick = () => {
  dcsListShow.value = true
}

//dcs绑定 / 解绑
const bindClick = (item: any) => {
  //绑定
  if (!item.sfbd) {
    let flag = false
    dcsIdArr.value.forEach((el: any) => {
      if (el.targetCode === item.targetCode) {
        flag = true
      }
    })

    if (dyInfo.value.dcsid) {
      dyInfo.value.dcsid += ', ' + item.equipNo
    } else {
      dyInfo.value.dcsid = ''
      dyInfo.value.dcsid += item.equipNo
    }

    if (!flag) {
      dcsIdArr.value.push(item)
    }

    item.sfbd = 1
    item.sfyx = 1
  }
  //解绑
  else if (item.sfbd) {
    dyInfo.value.dcsid = ''
    let str: any = ''
    dcsIdArr.value.forEach((el: any) => {
      if (el.targetCode === item.targetCode) {
        el.sfbd = 0
        el.sfyx = 0
      }

      if (el.sfbd === 1) {
        str += el.equipNo + ', '
      }
    })
    dyInfo.value.dcsid = str.substring(0, str.length - 2)
  }
}

//dcs 取消事件
const dcsCancelClick = () => {
  dcsListShow.value = false
}
//dcs 确认事件
const dcsSaveClick = () => {
  dcsListShow.value = false
}
/** DCS设备编码绑定功能 end */

/** 取消点击事件 */
const cancelClick = () => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  device.addUnitShow = false
}

/** 重置点击事件 */
const resetClick = () => {
  let dcsBdInfoList: any = []
  if (props.cjInfo.lx === 'edit') {
    dcsBdInfoList = [...dyInfo.value.dcsBdInfoList]
  }

  const dcsid = dyInfo.value.dcsid

  dyInfo.value = {
    dymc: '',
    syzt: '',
    sfyfhd: '',
    fhdg: '',
    fhdmj: '',
    dygnsm: '',
    ywdcsxt: '',
    ywsisxt: '',
    ywplxt: '',
    sfszhjxt: '',
    ywpmxt: '',
    hzwxxsm: '',
    symhyjzysx: '',
    bz: '',
    dcsBdInfoList: [],
  }

  //下拉框默认值
  dyInfo.value.syzt = syzt[0].zddm

  const sfBool: any = ['sfyfhd', 'sfszhjxt']
  const ywBool: any = ['ywdcsxt', 'ywsisxt', 'ywplxt', 'ywpmxt']
  for (const key in dyInfo.value) {
    if (sfBool.includes(key) || ywBool.includes(key)) {
      dyInfo.value[key] = '0'
    }
  }

  zywxjzList.value.forEach((item: any) => {
    if (!item.state) {
      item.zywxjzmc = ''
      item.zywxjzfydl = ''
    }
  })

  if (props.cjInfo.lx === 'edit') {
    dyInfo.value.dcsBdInfoList = dcsBdInfoList
  }

  dyInfo.value.dcsid = dcsid
}

/** 保存点击事件 */
const saveClick = () => {
  /** 校验数据非空 Start */
  // let flag = false
  // //基本信息
  // for (const key in dyInfo.value) {
  //   if (requiredNameArr.includes(key) && !dyInfo.value[key]) {
  //     console.log(key, '字段未填写')
  //     flag = true
  //   }
  // }
  // if (flag) {
  //   return (chemicalStore.FormCheckConfirmShow = true)
  // }
  /** 校验数据非空 End */

  /** 校验数据类型和长度 Strat */
  if (!checkNumberTypeAndLength(dyInfo.value.fhdg, '防火堤高', 6)) {
    return
  } else if (!checkNumberTypeAndLength(dyInfo.value.fhdmj, '防火堤面积', 6)) {
    return
  }
  /** 校验数据类型和长度 End */

  /** DCS设备编码 Start */
  const dcsBdInfoList: any = []
  dcsIdArr.value.forEach((item: any) => {
    dyInfo.value.dcsBdInfoList.forEach((el: any) => {
      if (el.dcsid === item.targetCode) {
        dcsBdInfoList.push({
          id: el.id,
          cjid: el.cjid,
          dcsid: item.targetCode,
          sfyx: item.sfyx,
          qyid: qyId.value,
          equipType: item.equipType,
          unit: item.unit,
        })
      }
    })
    //新增的数据
    if (item.sfbd === 1 && !item.cjid) {
      dcsBdInfoList.push({
        dcsid: item.targetCode,
        sfyx: item.sfyx,
        qyid: qyId.value,
        equipType: item.equipType,
        unit: item.unit,
      })
    }
  })
  delete dyInfo.value.dcsid
  delete dyInfo.value.dcsBdInfoList
  /** DCS设备编码 End */

  device.addUnitShow = false

  const params: any = {
    ...dyInfo.value,
    qyid: qyId.value,
    dcsBdInfoList,
    zzqid: props.cjInfo.fid,
    sfyx: 1,
  }

  //主要危险介质
  const zywxjzArr: any = []
  zywxjzList.value.forEach((item: any) => {
    if (item.zywxjzmc && item.zywxjzfydl && item.state) {
      //如果是修改需要传id
      if (props.cjInfo.lx === 'edit') {
        zywxjzArr.push({
          id: item.id,
          qyid: qyId.value,
          sfyx: item.sfyx,
          zywxjzmc: item.zywxjzmc,
          zywxjzfydl: item.zywxjzfydl,
        })
      } else {
        zywxjzArr.push({
          qyid: qyId.value,
          sfyx: 1,
          zywxjzmc: item.zywxjzmc,
          zywxjzfydl: item.zywxjzfydl,
        })
      }
    }
  })

  params.zywxjzxxModelList = zywxjzArr

  //如果是修改需要传cjid
  if (props.cjInfo.lx === 'edit') {
    params.id = props.cjInfo.cjId
  }

  insertOrUpdateDYXX(params)
    .then((res: any) => {
      emitter.emit('tabLeft_refreshData') //更新左侧tab统计数量

      //添加
      if (props.cjInfo.lx === 'add') {
        ElMessage.success('新增单元成功')
      }
      //修改
      else if (props.cjInfo.lx === 'edit') {
        ElMessage.success('修改单元成功')
        //需要修改地图要素的标注名称
        window.GScrollWallArray.forEach((item: any) => {
          if (item.name === props.cjInfo.cjId) {
            item.scrollwallLabel.feature3D.setText(dyInfo.value.dymc)
          }
        })
      }
      //刷新数据
      emitter.emit('zz_refreshData')
    })
    .catch((err: any) => {
      if (props.cjInfo.lx === 'add') {
        ElMessage.error('新增单元失败')
      } else if (props.cjInfo.lx === 'edit') {
        ElMessage.error('修改单元失败')
      }
    })
}

/** 如果是修改，需要重新渲染数据 */
watch(
  () => props.cjInfo.cjId,
  (newValue, oldValue) => {
    if (props.cjInfo.lx === 'edit') {
      loadUnitInfo()
    } else {
      resetClick() //重置表单
      fieldDefault() //字段默认值
    }
    loadDcsList()
  },
  {
    immediate: true,
    deep: true,
  }
)
</script>

<template>
  <DialogPopUp
    title="单元 / 子装置 / 工艺段 / 区"
    @cancel-click="cancelClick"
    @reset-click="resetClick"
    @save-click="saveClick"
  >
    <!-- 表单 -->
    <div>
      <!-- 单元基本信息 -->
      <div>
        <Title title-info="基本信息" />
        <el-form label-width="120px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="单元名称">
                <el-input v-model="dyInfo.dymc" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="使用状态">
                <el-select v-model="dyInfo.syzt" placeholder="请选择">
                  <el-option
                    v-for="item in syzt"
                    :key="item.value"
                    :label="item.zdmc"
                    :value="item.zddm"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否有防火堤">
                <el-select v-model="dyInfo.sfyfhd" placeholder="请选择">
                  <el-option
                    v-for="item in sfBool"
                    :key="item.value"
                    :label="item.zdmc"
                    :value="item.zddm"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="防火堤高">
                <el-input v-model="dyInfo.fhdg">
                  <template #suffix>
                    <i>m</i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="防火堤面积">
                <el-input v-model="dyInfo.fhdmj">
                  <template #suffix>
                    <i>m2</i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="单元功能说明">
                <el-input v-model="dyInfo.dygnsm" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="有无DCS系统">
                <el-select v-model="dyInfo.ywdcsxt" placeholder="请选择">
                  <el-option
                    v-for="item in ywBool"
                    :key="item.value"
                    :label="item.zdmc"
                    :value="item.zddm"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有无SIS系统">
                <el-select v-model="dyInfo.ywsisxt" placeholder="请选择">
                  <el-option
                    v-for="item in ywBool"
                    :key="item.value"
                    :label="item.zdmc"
                    :value="item.zddm"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="DCS设备编码">
                <el-input v-model.trim="dyInfo.dcsid" class="dcs-sbbm" disabled>
                  <template #suffix>
                    <span class="dcs-sbbm-btn" @click="dcsBindingClick">点击绑定</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="有无喷淋系统">
                <el-select v-model="dyInfo.ywplxt" placeholder="请选择">
                  <el-option
                    v-for="item in ywBool"
                    :key="item.value"
                    :label="item.zdmc"
                    :value="item.zddm"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否设置火炬系统">
                <el-select v-model="dyInfo.sfszhjxt" placeholder="请选择">
                  <el-option
                    v-for="item in sfBool"
                    :key="item.value"
                    :label="item.zdmc"
                    :value="item.zddm"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="有无泡沫系统">
                <el-select v-model="dyInfo.ywpmxt" placeholder="请选择">
                  <el-option
                    v-for="item in ywBool"
                    :key="item.value"
                    :label="item.zdmc"
                    :value="item.zddm"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="dyInfo.bz" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-form :label-position="'top'" style="padding-left: 20px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="火灾危险性说明">
                <el-input v-model="dyInfo.hzwxxsm" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="使用灭火药剂类型及注意事项">
                <el-input v-model="dyInfo.symhyjzysx" />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 主要危险介质 -->
          <div class="table-title">
            <div></div>
            <div>主要危险介质</div>
            <div></div>
          </div>
          <div class="zywxjz table-container">
            <div class="table-top-th">
              <div>序号</div>
              <div>名称</div>
              <div>反应当量</div>
              <div>操作</div>
            </div>
            <div class="table-content">
              <div
                v-for="(item, index) in zywxjzList.filter((item: any) => item.sfyx === 1)"
                :key="index"
                class="table-item"
              >
                <div>{{ index + 1 }}</div>
                <div>
                  <el-input
                    v-if="!item.state"
                    v-model="item.zywxjzmc"
                    style="width: 70%"
                    size="small"
                  />
                  <span
                    v-else
                    style="display: inline-block; width: 180px"
                    class="single-line-text-exceeds"
                    :title="item.zywxjzmc"
                    >{{ item.zywxjzmc }}</span
                  >
                </div>
                <div>
                  <el-input
                    v-if="!item.state"
                    v-model="item.zywxjzfydl"
                    style="width: 90%"
                    size="small"
                  />
                  <span
                    v-else
                    style="display: inline-block; width: 180px"
                    class="single-line-text-exceeds"
                    :title="item.zywxjzfydl"
                    >{{ item.zywxjzfydl }}</span
                  >
                </div>
                <div>
                  <div v-if="!item.state">
                    <img
                      src="@/assets/image/fire/保存.png"
                      style="cursor: pointer"
                      @click="tableSaveClick(item, index)"
                    />
                  </div>
                  <div v-else>
                    <img
                      style="cursor: pointer; margin-right: 10px"
                      src="@/assets/image/fire/编辑.png"
                      @click="tableEditClick(item)"
                    />
                    <img
                      style="cursor: pointer"
                      src="@/assets/image/fire/删除.png"
                      @click="tableDeleteClick(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </DialogPopUp>

  <!-- DCS设备列表 弹窗 -->
  <div v-if="dcsListShow" class="cginfo-container">
    <p class="title">DCS设备列表</p>
    <div style="height: 100%; padding: 0 0px 17px">
      <el-input
        v-model.trim="dcsSearchInput"
        placeholder="请输入名称或编号"
        size="large"
        :suffix-icon="Search"
        class="card-search card-bck-color"
        @input="dcsSearchInputClick"
      />
      <div class="cginfo-main">
        <div
          v-for="(item, index) in dcsList"
          :key="index"
          class="dcs-List"
          :class="{ 'active-dcs': item.sfbd === 1 }"
        >
          <div>
            <div style="display: flex; justify-content: space-between">
              <div style="color: red; font-weight: 700">{{ item.jc }}</div>

              <div>
                <span>{{ item.value ? item.value : '--' + ' ' }}</span>
                <span>{{ item.unit }}</span>
              </div>
            </div>

            <div class="dsc-message">
              <div>{{ item.equipNo }}</div>
              <div>{{ item.equipName }}</div>
            </div>
          </div>

          <div v-if="item.sfbd == '1'" class="bd-sign"></div>

          <div class="bd-group" @click="bindClick(item)">
            <div v-if="item.sfbd === 0" class="bd-img"></div>
            <div v-if="item.sfbd === 1" class="jb-img"></div>
            <div class="bd-title">{{ item.sfbd == 0 ? '绑定' : '解绑' }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="cginfo-bottom-btn">
      <el-button type="info" @click="dcsCancelClick">取&nbsp;&nbsp;消</el-button>
      <el-button type="info" style="background: #02979b" @click="dcsSaveClick"
        >确&nbsp;&nbsp;认</el-button
      >
    </div>
  </div>
</template>

<style lang="less" scoped>
.table-title {
  position: relative;
  top: 10px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 16px;
  div:first-child,
  div:last-child {
    flex: 1;
    height: 3px;
    background-color: #666;
  }
  div:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    text-align: center;
  }
}
.table-container {
  color: #fff;
  font-size: 16px;
  border: 1px solid #666;
  border-top: 0;
  .table-top-th {
    display: flex;
    padding-top: 18px;
    border-bottom: 1px solid #666;
    & > div {
      text-align: center;
    }
    div:nth-child(1) {
      width: 120px;
    }
    div:nth-child(2),
    div:nth-child(3) {
      flex: 1;
    }
    div:nth-child(4) {
      width: 120px;
    }
  }
  .table-content {
    height: 200px;
    overflow: auto;
    .table-item {
      display: flex;
      align-items: center;
      height: 40px;
      border-bottom: 1px solid #666;
      & > div {
        text-align: center;
      }
      div:nth-child(1) {
        width: 120px;
      }
      div:nth-child(2),
      div:nth-child(3) {
        flex: 1;
      }
      div:nth-child(4) {
        width: 120px;
      }
    }
  }
}

.cginfo-container {
  position: absolute;
  top: 112px;
  left: calc(50% + 360px);
  width: 350px;
  height: calc(100% - 122px);
  padding: 5px 8px 7px 9px;
  border: 1px solid #0d609c;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.59) 100%, #00081d 0%);
  box-sizing: border-box;
  z-index: 10;

  .cginfo-main {
    height: calc(100% - 160px);
    overflow: auto;
  }
  /deep/.el-input__wrapper {
    background: rgba(1, 7, 17, 0.7);
  }

  /deep/.card-bck-color {
    font-size: 16px;
    color: #fff;
    background-color: rgba(1, 7, 17, 0.6);
  }
  /deep/.card-search {
    margin-bottom: 10px;
    border-radius: 8px;
    .el-input__suffix {
      font-size: 18px;
      cursor: pointer;
    }
  }

  .tankfarm-card-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 36px;
    line-height: 36px;
    margin-bottom: 12px;
    padding-left: 6px;
    padding-right: 14px;
    background: rgba(1, 7, 17, 0.7);
    border: 1px solid #6d6d6d;
    border-radius: 4px;
    span {
      color: #fff;
    }

    span:nth-child(2) {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 170px;
    }

    span:first-child {
      width: 100px;
      margin: 0 15px 0 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .export-icon {
      position: absolute;
      right: 20px;
      display: inline-block;
      width: 24px;
      height: 20px;
      background-image: url(@/assets/image/common/export-icon.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: pointer;
    }
  }

  .cginfo-bottom-btn {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button {
      width: 100px;
      height: 30px;
      font-size: 18px;
      background: #778082;
      border: 0;
      border-radius: 10px;
      cursor: pointer;
    }
    .el-button:last-child {
      margin-left: 70px;
    }
  }
  .title {
    height: 45px;
    line-height: 45px;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid #6d6d6d;
    margin-bottom: 10px;
  }
}

.active-dcs {
  border: 1px solid #00f6ff !important;
}

.dcs-sbbm {
  /deep/.el-input__wrapper {
    padding: 0;
    box-shadow: unset;
  }
}
.dcs-sbbm-btn {
  width: 90px;
  height: 35px;
  background-color: rgb(2, 151, 155);
  border: 0;
  color: #fff;
  cursor: pointer;
}

.dcs-List {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(1, 7, 17, 0.8);
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  padding: 2px 0 2px 14px;
  box-sizing: border-box;
  margin-bottom: 10px;
  .dsc-message {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bd-sign {
    width: 30px;
    height: 30px;
    margin-top: 8px;
    background: url('../../../../../assets/image/common/bdsign.png');
    background-repeat: no-repeat;
  }
  .bd-group {
    width: 40px;
    height: 80px;
    background: rgba(0, 246, 255, 0.4);
    border-radius: 0px 8px 8px 0px;
    margin-top: -2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    cursor: pointer;

    .bd-img {
      width: 24px;
      height: 24px;
      background: url('../../../../../assets/image/ProductionStorage/bd-icon.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .jb-img {
      width: 24px;
      height: 24px;
      background: url('../../../../../assets/image/ProductionStorage/jb-icon.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .bd-title {
    }
  }
}
</style>
